import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input, Table, Tag, Form, message, Pagination } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { get_admin_list_async, select_admin_list, select_admin_list_count } from '@/store/slice/user'
import { useAppDispatch, useAppSelector } from '@/store'
import dayjs from 'dayjs'
import SManageModal from './modal'
import { setShow } from '@/store/slice/admin_manage'
interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

// 管理员管理
export default function AdminManage () {

  const dispatch = useAppDispatch()
  const admin_list = useAppSelector(select_admin_list)
  const count = useAppSelector(select_admin_list_count)
  const [current, setCurrent] = useState<number>(1)
  // 获取管理员列表
  useEffect(() => {
    dispatch(get_admin_list_async({
      pageNo : 1,
      pageSize : 10
    }))
  }, [])

  // 给每一个admin添加key属性
  const data: DataType[] = admin_list.map((item: any) => {
    return {
      ...item,
      key: item._id
    }
  })

  const columns: ColumnsType<DataType> = [
    {
      title: '头像',
      key: 'avatar',
      dataIndex: 'avatar',
      render: (_, record) => (
        <>
          <img style={{ width: 60, borderRadius: '50%',height: 60  }} src={`http://${_}`} alt="" />
        </>
      )
    },
    {
      title: 'id',
      dataIndex: '_id',
      key: '_id',
      render: text => <a>{text}</a>
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone'
    },
    {
      title: '注册时间',
      dataIndex: 'created',
      key: 'created',
      render: (_, record) => {
        return <>{dayjs(_).format('YYYY-MM-DD HH:mm:ss')}</>
      }
    }
  ]
  const showSManageModal = () => {
    dispatch(setShow(true))
  }
  const changePage = (page: number) => {
    dispatch(
      get_admin_list_async({
        pageNo: page,
        pageSize: 10
      })
     
    ) 
    setCurrent(page)
  }
  return (
    <div>
      <div className={styles.search}>
        <SManageModal />
        <Button style={{ marginLeft: 20 }} onClick={showSManageModal}>
                新增管理员
        </Button>
      </div>
      <div className={styles.table}>
        <Table columns={columns} dataSource={data}   pagination={false} />
        <Pagination onChange={changePage} current={current} total={count} style={{ marginTop: 20 }} />
      </div>
    </div>
  )
}
